<div class="comic-reader-container" tabindex="0">
  <div class="navigation">
    <div class="goto-page-controls">
      <div class="input-group">
        <input
          type="number"
          [(ngModel)]="goToPageInput"
          [min]="1"
          [max]="pages.length"
          placeholder="Page"
          class="page-input"
          />
        <button
          class="go-button"
          (click)="goToPageInput !== null && goToPage(goToPageInput)"
          [disabled]="goToPageInput === null || goToPageInput < 1 || goToPageInput > pages.length">
          Go
        </button>
      </div>
    </div>

    <div class="page-controls">
      <button class="nav-button first-page" (click)="goToPage(1)" [disabled]="currentPage === 0" title="First Page">
        <span>⟨⟨</span>
      </button>
      <button class="nav-button prev-page" (click)="previousPage()" [disabled]="currentPage === 0" title="Previous Page">
        <span>⟨</span>
      </button>
      <div class="page-info">
        <span class="current-page">{{ currentPage + 1 }}</span>
        <span class="page-separator">{{ isTwoPageView && imageUrls.length > 1 ? '-' + (currentPage + 2) : '' }}</span>
        <span class="total-pages"> of {{ pages.length }}</span>
      </div>
      <button class="nav-button next-page" (click)="nextPage()" [disabled]="currentPage >= pages.length - 1" title="Next Page">
        <span>⟩</span>
      </button>
      <button class="nav-button last-page" (click)="goToPage(pages.length)" [disabled]="currentPage >= pages.length - 1" title="Last Page">
        <span>⟩⟩</span>
      </button>
    </div>

    <div class="spread-controls">
      @if (isTwoPageView) {
        <button class="view-button spread-toggle" (click)="toggleSpreadDirection()" title="Toggle Spread Direction">
          <span>{{ pageSpread === 'ODD' ? '⬅️' : '➡️' }}</span>
        </button>
      }
      <button class="view-button layout-toggle" (click)="toggleView()" title="Toggle View">
        <span>{{ isTwoPageView ? '📄' : '📖' }}</span>
      </button>
      <button class="view-button background-toggle" (click)="toggleBackground()" title="Toggle Background Color">
        <span>{{ backgroundColorIcon }}</span>
      </button>
    </div>
  </div>

  <div class="image-container"
       [class.two-page-view]="isTwoPageView"
       [class.bg-black]="backgroundColor === 'black'"
       [class.bg-gray]="backgroundColor === 'gray'"
       [class.bg-white]="backgroundColor === 'white'">
    @if (!isLoading) {
      @if (pages.length > 0) {
        <div class="pages-wrapper">
          @for (url of imageUrls; track url) {
            <img [src]="url" alt="Page Image" class="page-image"/>
          }
        </div>
      } @else {
        <div class="no-pages">
          <p>No pages available.</p>
        </div>
      }
    } @else {
      <div class="loading-container">
        <p-progressSpinner styleClass="custom-spinner"></p-progressSpinner>
        <p class="loading-text">Processing pages... This may take a few seconds on first load. Future loads will be significantly faster.</p>
      </div>
    }
  </div>
</div>
